<template>
  <div class="bgc">
    <div class="title">
      <img src="@/assets/首页标题.png" alt="">
    </div>

    <div class="left"></div>

    <div class="right">
      <div class="tq">
        <div class="tq_title">
          <span class="name">天气情况</span>
        </div>

        <div class="content">
          <div class="c_content" @mousemove="">
            <div class="day">今天</div>
            <div v-if="weather.threeDdata && weather.threeDdata.daily[0].textNight == '阴'" class="dayimg"><img
                src="@/assets/多云@2x.png" alt=""></div>
            <div v-else-if="weather.threeDdata && weather.threeDdata.daily[0].textNight == '暴雨'" class="dayimg"><img
                src="@/assets/暴雨.png" alt=""></div>
            <div v-else-if="weather.threeDdata && weather.threeDdata.daily[0].textNight.includes('雨')" class="dayimg"><img
                src="@/assets/下雨@2x.png" alt=""></div>
            <div v-else class="dayimg"><img src="@/assets/晴天@2x.png" alt=""></div>
            <div class="weather">{{ weather.threeDdata ? weather.threeDdata.daily[0].textNight : '晴' }}</div>
            <div class="temperature">{{ weather.threeDdata ? weather.threeDdata.daily[0].tempMin : 0 }}{{
              weather.threeDdata ? '~' +
            weather.threeDdata.daily[0].tempMax : '' }}℃</div>
          </div>
          <div class="c_content">
            <div class="day">明天</div>
            <div v-if="weather.threeDdata && weather.threeDdata.daily[1].textNight == '阴'" class="dayimg"><img
                src="@/assets/多云@2x.png" alt=""></div>
            <div v-else-if="weather.threeDdata && weather.threeDdata.daily[1].textNight == '暴雨'" class="dayimg"><img
                src="@/assets/暴雨.png" alt=""></div>
            <div v-else-if="weather.threeDdata && weather.threeDdata.daily[1].textNight.includes('雨')" class="dayimg"><img
                src="@/assets/下雨@2x.png" alt=""></div>
            <div v-else class="dayimg"><img src="@/assets/晴天@2x.png" alt=""></div>
            <div class="weather">{{ weather.threeDdata ? weather.threeDdata.daily[1].textNight : '晴' }}</div>
            <div class="temperature">{{ weather.threeDdata ? weather.threeDdata.daily[1].tempMin : 0 }}{{
              weather.threeDdata ? '~' +
            weather.threeDdata.daily[1].tempMax : '' }}℃</div>
          </div>
          <div class="c_content">
            <div class="day">后天</div>
            <div v-if="weather.threeDdata && weather.threeDdata.daily[2].textNight == '阴'" class="dayimg"><img
                src="@/assets/多云@2x.png" alt=""></div>
            <div v-else-if="weather.threeDdata && weather.threeDdata.daily[2].textNight == '暴雨'" class="dayimg"><img
                src="@/assets/暴雨.png" alt=""></div>
            <div v-else-if="weather.threeDdata && weather.threeDdata.daily[2].textNight.includes('雨')"
              class="dayimg"><img src="@/assets/下雨@2x.png" alt=""></div>
            <div v-else class="dayimg"><img src="@/assets/晴天@2x.png" alt=""></div>
            <div class="weather">{{ weather.threeDdata ? weather.threeDdata.daily[2].textNight : '晴' }}</div>
            <div class="temperature">{{ weather.threeDdata == undefined ? '0' : weather.threeDdata.daily[2].tempMin }}~{{
              weather.threeDdata
              == undefined ? '0' : weather.threeDdata.daily[2].tempMax }}℃</div>
          </div>
        </div>

        <div class="describe">
          <div class="describe_txt">
            <div class="describe_txt1">
              <span class="txt1">{{ weather.threeDdata ? weather.threeDdata.daily[0].windDirNight : '西北风' }}</span><span
                class="txt2">{{ weather.threeDdata ? weather.threeDdata.daily[0].windScaleNight : '1' }}级</span>
            </div>
            <div class="describe_txt2">
              <span class="txt1">降水量</span><span class="txt2">{{ weather.threeDdata ? weather.threeDdata.daily[0].precip :
                '0'
              }}</span>
            </div>
          </div>
          <div class="describe_txt">
            <div class="describe_txt1">
              <span class="txt1">湿度</span><span class="txt2">{{ weather.threeDdata ? weather.threeDdata.daily[0].humidity
                : '1'
              }}%</span>
            </div>
            <div class="describe_txt2">
              <span class="txt1">温度</span><span class="txt2">{{ weather.threeDdata ? weather.threeDdata.daily[0].tempMin :
                '20'
              }}℃</span>
            </div>
          </div>
        </div>

        <div class="icon" @click="fnweather">
          <img src="@/assets/设置.png" alt="">
        </div>
        <div class="iconzz" @click="fnReturn">
          <img src="@/assets/刷新.png" alt="">
        </div>
      </div>

      <div class="day_tq_all" :class="{ active: isShow }">
        <div class="day_tq">
          <div class="scroll">
            <div class="day_tq_info" v-for="i in weather.twoFourHdata?.hourly">
              <div>{{ i.fxTime.substring(11, 13) }}时</div>
              <div style="color: #59d8fc;">{{ i.temp }}℃</div>
              <div>降雨量 <span style="color: #22ffda;">{{ i.precip }}</span></div>
            </div>
          </div>
        </div>

        <div class="dat_tq_box">
          <div class="box">
            <div style="font-size: 1.2vh; color: #b6b5b5;">💧降水强度 </div>
            <div style="color: #fff; font-size: 1.6vh; padding: 0.5vh 0 0 0.4vw;">{{ weather.twoFourHdata?.hourly[0].precip
            }} 毫米</div>
            <div style="color: #dfdede; font-size: 1vh; ">预计未来3天会有{{ weather.threePrecip }}毫米降雨</div>
          </div>
          <div class="box">
            <div style="font-size: 1.2vh; color: #b6b5b5;">🌡体感温度 </div>
            <div style="color: #fff; font-size: 1.6vh; padding: 0.7vh 0 0 0.4vw;">{{ weather.twoFourHdata?.hourly[0].temp /
              1
              + 4 }} °</div>
            <div style="color: #dfdede; font-size: 1vh; padding: 0.6vh 0 0 ;">{{ weather.twoFourHdata?.hourly[0].temp / 1 +
              4
              > 25 ? '潮湿使人感觉热' : '温度适中舒适' }}</div>
          </div>

        </div>
      </div>


    </div>

    <div class="bottom">
      <div class="button_box">
        <router-link to="home">
          <div class="button" :class="{ active: route.name == 'Home' }">
            <!-- <img :class="{ active: route.name == 'Home' }" src="@/assets/总览@2x.png" alt=""> -->
            <span class="text">降水监测</span>
          </div>
        </router-link>

        <router-link to="rains">
          <div class="button" :class="{ active: route.name == 'Rains' }">
            <span class="text">雨型仿真</span>
            <!-- <img :class="{ active: route.name == 'Rains' }" src="@/assets/智慧巡检@2x.png" alt=""> -->
          </div>
        </router-link>
        <router-link to="warning">
          <div class="button" :class="{ active: route.name == 'Warning' }">
            <span class="text">风险预案</span>
            <!-- <img :class="{ active: route.name == 'Warning' }" src="@/assets/智慧作业@2x.png" alt=""> -->
          </div>
        </router-link>

        <router-link to="history">
          <div class="button" :class="{ active: route.name == 'History' }">
            <span class="text">历史警情</span>
          </div>
        </router-link>
        <router-link to="sewageplant">
          <div class="button" :class="{ active: route.name == 'Sewageplant' }">
            <span class="text">水厂运维</span>
            <!-- <img :class="{ active: route.name == 'Sewageplant' }" src="@/assets/智慧监测@2x.png" alt=""> -->
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue'
import { weather3DAPI, weather24HAPI } from '@/apis/tianqi'
import { useRoute } from "vue-router";

const route = useRoute();



console.log(route);

const json3day: any = {
  '1': [
    {
      textNight: '暴雨',
      tempMax: 30,
      tempMin: 22,
      precip: 100.7,
      windDirNight: '北风 1~3',
      humidity: '85'
    },
    {
      textNight: '阴',
      tempMax: 28,
      tempMin: 20,
      precip: 0,
      windDirNight: '北风 1~3',
    },
    {
      textNight: '晴',
      tempMax: 26,
      tempMin: 19,
      precip: 0,
      windDirNight: '北风 1~3'
    }],
  '2': [
    {
      textNight: '暴雨',
      tempMax: 28,
      tempMin: 19,
      precip: 94.7,
      windDirNight: '北风 1~3',
      humidity: '88'
    },
    {
      textNight: '晴',
      tempMax: 25,
      tempMin: 16,
      precip: 0,
      windDirNight: '北风 1~3'
    },
    {
      textNight: '阴',
      tempMax: 28,
      tempMin: 18,
      precip: 0,
      windDirNight: '北风 1~3'
    }],
  '3': [
    {
      textNight: '暴雨',
      tempMax: 28,
      tempMin: 19,
      precip: 80.6,
      windDirNight: '北风 1~3',
      humidity: '86'
    },
    {
      textNight: '晴',
      tempMax: 28,
      tempMin: 16,
      precip: 0,
      windDirNight: '北风 1~3'
    },
    {
      textNight: '阴',
      tempMax: 29,
      tempMin: 18,
      precip: 0,
      windDirNight: '北风 1~3'
    }],
  '4': [
    {
      textNight: '暴雨',
      tempMax: 25,
      tempMin: 19,
      precip: 94.7,
      windDirNight: '北风 1~3',
      humidity: '83'
    },
    {
      textNight: '阴',
      tempMax: 29,
      tempMin: 22,
      precip: 0,
      windDirNight: '北风 1~3'
    },
    {
      textNight: '阴',
      tempMax: 29,
      tempMin: 20,
      precip: 0,
      windDirNight: '北风 1~3'
    }],
}

let weather: any = reactive({
  threeDdata: undefined,
  twoFourHdata: undefined,
  threePrecip: 0,
})
const getweather3DAPI = async () => {
  let res = await weather3DAPI()
  weather.threeDdata = res.data
  weather.threePrecip = 0
  res.data.daily.forEach((i: any) => {
    weather.threePrecip += Number(i.precip)
  })
  // console.log(route.query.dateId);
  if (route.query.dateId) { // 是否是历史数据
    
    weather.threeDdata.daily = json3day[`${route.query.dateId}`]
  }
}
const getweather24HAPI = async () => {
  let res = await weather24HAPI()
  weather.twoFourHdata = res.data
}
getweather3DAPI()
getweather24HAPI()

const isShow = ref(false)
const fnweather = () => {
  isShow.value = !isShow.value
}

const fnReturn = async () => {
  let res = await weather3DAPI()
  weather.threeDdata = res.data
  weather.threePrecip = 0
  res.data.daily.forEach((i: any) => {
    weather.threePrecip += Number(i.precip)
  })

  // ;(window as any).ue4('move')

}

</script>


<style scoped>
.dat_tq_box {
  width: 18vw;
  height: 10vh;
  display: flex;
  justify-content: space-around;
}

.box {
  /* background-color: pink; */
  width: 5vw;
  height: 9vh;
  padding: 0.4vh 0.2vw;
  border-radius: 5px;
  background-image: url('~@/assets/天气框.png');
  background-repeat: no-repeat;
  background-position: center;
}

.day_tq_info div {
  margin-top: 0.7vh;
}

.day_tq_info {
  width: 4.5vw;
  text-align: center;
}

.scroll {
  width: calc(300px * 12);
  display: flex;
  justify-content: space-between;
  /* overflow-x: auto; */
}

.day_tq {
  margin-top: 1vh;
  color: #fff;
  width: 18vw;
  height: 10vh;
  background-size: 110% 110%;
  padding: 0 1.5vw 0.5vh 1.5vw;
  overflow: hidden;
  /* display: none; */
  overflow-x: auto;
}

.day_tq_all {
  width: 18vw;
  height: 20vh;
  background-image: url('~@/assets/天气框.png');
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  display: none;
}

.active {
  display: block;
}

.icon {
  width: 1vw;
  height: 2vh;
  position: absolute;
  right: 1.4vw;
  top: 0.8vh;
}

.icon:hover {
  transform: scale(1.2);
  cursor: pointer;
}

.iconzz {
  width: 0.8vw;
  height: 1.4vh;
  position: absolute;
  right: 3.4vw;
  top: 1.1vh;
}

.iconzz:hover {
  transform: scale(1.2);
  cursor: pointer;
}

/* --------------------------------------------------- */
.bgc {
  width: 100vw;
  height: 100vh;
  background-image: url('~@/assets/背景.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding-top: 1vh;
}

.title {
  height: 7.5vh;
  width: 100vw;
}

img {
  width: 100%;
  height: 100%;
}

.bottom {
  height: 8vh;
  width: 58vw;
  position: fixed;
  bottom: 0;
  left: 21vw;
  background-image: url('~@/assets/底部菜单背景.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
}

.button_box {
  width: 40vw;
  margin-left: 9vw;
  padding-top: 2vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.button {
  width: 5.5vw;
  height: 3.8vh;
  line-height: 3.8vh;
  text-align: center;
  cursor: pointer;
  background-image: url('~@/assets/按钮-bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  opacity: 0.6;
}

.button:hover,
.button.active {
  opacity: 1;
}

.button .text {
  color: #fff;
  font-size: 1vw;
}

.button img {
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.button img.active {
  opacity: 1;
}

.button img:hover {
  opacity: 1;
}

.left {
  float: left;
  height: calc(100vh - 15vh);
  /* background-color: pink; */
  margin-left: 10px;
}

.right {
  float: right;
  height: calc(100vh - 15vh);
  margin-right: 10px;
}

.tq {
  width: 18vw;
  height: 25vh;
  background-image: url('~@/assets/天气框.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding: 0 1.5vw 0.5vh 1.5vw;
  position: relative;
}

.tq_title {
  height: 4vh;
  line-height: 4vh;
  color: #fff;
  /* background-color: #fff; */
  margin-bottom: 1vh;
  border-bottom: 0.5px rgba(94, 255, 255, 0.3) solid;
  font-size: 1vh;
}

.tq_title .name {
  display: inline-block;
  padding-right: 2vh;
  height: 100%;
  border-bottom: 1px solid #00fdff;
  letter-spacing: 2px;
}

.content {
  width: 100%;
  height: 12vh;
  margin: 1vh 0;
}

.describe {
  width: 100%;
  height: 6vh;
  background-image: url('~@/assets/天气框.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 1vw;
}

.describe_txt {
  /* display: flex; */
  font-size: 1.4vh;
  color: #fff;
}

.describe_txt1,
.describe_txt2 {
  height: 2vh;
  margin-top: 0.5vh;
}

.txt2 {
  margin-left: 1vw;
  color: #59d8fc;
  /* background-color: chartreuse; */
}

.content {
  display: flex;
  justify-content: space-around;
  text-align: center;
  color: #fff;
}

.day {
  font-size: 1.6vh;
}

.weather,
.temperature {
  font-size: 1.2vh;
  margin-top: 0.5vh;
}

.dayimg {
  width: 2vw;
  height: 3.6vh;
  margin: 0.5vh auto;
}

.dayimg img {
  width: 100%;
  height: 100%;
}
</style>